<script lang="ts" setup>
import { NCard } from "naive-ui";
import { useDesignStore } from "@/stores/module/design";
import { computed, ref, toRefs, onMounted } from "vue";
import SessionList from "./components/SessionList.vue";
import ChatMessage from "./components/ChatMessage.vue";

const { getPrefixCls } = useDesignStore();

const prefixCls = getPrefixCls("chat");

const sessionListRef = ref<InstanceType<typeof SessionList> | null>(null);
const chatBodyRef = ref<InstanceType<typeof ChatMessage> | null>(null);

onMounted(async () => {
  await sessionListRef.value?.loadSessions();
  sessionListRef.value?.handleSession(sessionListRef.value?.sessionList[0]);
  chatBodyRef.value?.getMessages(sessionListRef.value?.currentSessionId!);
});
</script>

<template>
  <NCard class="flex flex-col">
    <template #header>
      <div class="font-size-6 text-center">Chat Demo</div>
    </template>
    <div class="flex-1 flex items-center h-full">
      <SessionList ref="sessionListRef" class="w-30" />
      <ChatMessage ref="chatBodyRef" class="flex-1" />
    </div>
  </NCard>
  <!-- <div class="flex px-2">
    <div :class="prefixCls" class="flex flex-col justify-between flex-1">
      <div class="font-size-8 text-center">chat demo</div>
      <div class="flex flex-row gap-3">
        <div class="px-5 border-r-1 border-r-black border-r-solid">
          <NButton strong secondary round type="primary">
            <template #icon>
              <NIcon><Add /></NIcon>
            </template>
            新建对话
          </NButton>
        </div>
        <div class="flex-1">
          <div>center</div>
          <div class="flex gap-5 flex-items-end bg-slate-100 border-rd-2xl px-3 py-2">
            <textarea
              name="chat-input"
              rows="5"
              autofocus
              placeholder="发送消息"
              class="flex-1 resize-none outline-none border-none font-size-4 font-sans bg-slate-100"
              v-model="message"
            ></textarea>
            <NButton circle secondary type="primary" :disabled="!isSendDis">
              <template #icon>
                <NIcon><ArrowUp /></NIcon>
              </template>
            </NButton>
          </div>
        </div>
      </div>
    </div>
  </div> -->
</template>

<style lang="less" scoped>
@prefix-cls:~ "@{namespace}-chat";
.@{prefix-cls} {
}
</style>
